<template>
	<view class="user-select-container">
		<view class="tab-wrapper">
			<view class="tab">
				<view  @click="fetchUser(idx,item.type,item.name)" :class="`item ${curIdx === idx ? 'item__active' : ''} ${curIdx + 1 === idx ? 'item__active_next' : ''}`" v-for="(item, idx) in tabList" :key="item.id">
					<view class="label">{{item.name}}</view>
					<view class="shape">
						<view class="shape-body"></view>
					</view>
					<view class="shape shape-mirrow">
						<view class="shape-body"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="wrapper">
			<u-index-list :indexList="indexList">
				<view slot="header" class="list">
					<u-line></u-line>
				</view>
				<template v-for="(item, key, index) in userIndexList">
					<u-index-item :key="item + index" v-if="item.length">
						<u-index-anchor :text="key"></u-index-anchor>
						<view class="list" v-for="(item1, index1) in item" :key="item1 + index1" @click="handleSelectUser(item1)">
							<view class="item" >
								<view 
								:class="`check ${selectedUser.findIndex(e => e.user_id === item1.user_id) !== -1 ? 'check__active' : ''}`" 
								>
									<view class="check-on"></view>
								</view>
								<view class="name">{{item1.nick_name}}</view>
							</view>
							<u-line></u-line>
						</view>
					</u-index-item>
				</template>
			</u-index-list>
		</view>
		<view class="actions">
			 <view class="checkbox">
				 <u-checkbox-group v-if="!single" v-model="checked">
				 	 <text style="margin-right: 8rpx;">全选</text><u-checkbox name="all" @change="handleSelectAll"></u-checkbox>
				 </u-checkbox-group>
			 </view>
			 <view class="btn-wrapper">
				 <view class="custom-button cancel" @click="cancelConfirm()">
				 	取消
				 </view>
				 <view class="custom-button" @click="confirmSelectUser()">
				 	确认（{{selectedUser.length}}）
				 </view>
			 </view>
		</view>
	</view>
</template>

<script>
	import { getUserList } from '@/api/user.js'
	import Pinyin from '@/src/utils/ChinesePY.js'
	const indexList = () => {
		const indexList = []
		const charCodeOfA = 'A'.charCodeAt(0)
		for (let i = 0; i < 26; i++) {
			indexList.push(String.fromCharCode(charCodeOfA + i))
		}
		return indexList
	}
	export default {
		data() {
			return {
				selectedUser: [],
				indexList: indexList(),
				userIndexList: {},
				checked: [],
				tabList: [
					{ id: 0, name: '全部', type: ''},
					{ id: 1, name: '项目经理', type: '项目经理'},
					{ id: 2, name: '中心专职', type: '中心专职'},
					{ id: 3, name: '部门主任', type: '部门主任'},
					{ id: 4, name: '公司领导', type: '公司领导'}
				],
				curIdx: 0,
				curType: '',
			}
		},
		props: {
			complete: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default() {
					return []
				}
			},
			type: {
				type: String,
				default: 'muti',
			},
			single: {
				type: Boolean,
				default: false
			}
		},
		mounted() {
			this.selectedUser = JSON.parse(JSON.stringify(this.list));
			this.fetchUser(0,"","全部");
		},
		// onLoad(){
		// 	this.fetchUser(0,"","全部")
		// },
		methods: {
			// setCurIdx(idx, type) {
			// 	this.curIdx = idx;
			// 	this.curType = type;
			// 	this.genList();
			// },
			
			genList() {
				let arr = this.userList;
				console.log(arr);
				let map = {};
				this.indexList.forEach(item => {
					map[item] = [];
				})
				arr.forEach(item => {
					const first = Pinyin.getWordsCode(item.nick_name).toUpperCase().substring(0, 1);
					if (!map[first]) {
						map[first] = [];
					}
					map[first].push(item);
				})					
				this.userIndexList = map;
			},
			async fetchUser(idx,type,name) {
				console.log(idx,type,name);
				this.curIdx = idx;
				this.curType = type;
				uni.showLoading({title: '加载中...'});
				const { data } = await getUserList({role_type: name});
				uni.hideLoading();
				if (data.code === 1) {
					this.userList = data.data;
					if (this.selectedUser.length !== 0 && (this.selectedUser.length === this.userList.length)) {
						this.checked = ['all'];
					}
					this.genList();
				}
				
			},
			handleSelectAll(e) {
				if (e) {
					this.selectedUser = JSON.parse(JSON.stringify(this.userList));
				} else {
					this.selectedUser = [];
				}
			},
			handleSelectUser(item) {
				if (this.single) {
					this.selectedUser = [item];
					return;
				}
				const index = this.selectedUser.findIndex(e => e.user_id === item.user_id);
				if (index !== -1) {
					this.selectedUser.splice(index, 1);
				} else {
					this.selectedUser.push(item);
				}
			},
			cancelConfirm() {
				this.$emit('cancelConfirm');
			},
			confirmSelectUser() {
				let res = this.selectedUser;				
				this.$emit('onConfirm', res);
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	/deep/{
		.u-index-list__letter__item__index{
			color: #333!important;
		}
		.u-index-anchor{
			// background-color: #2d5dfd!important;
			// color: #fff!important;
		}
	}
	.user-select-container{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999;
		background-color: #fff;
		.tab-wrapper{
			background-color: #3759f2;
		}
		.tab{
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			overflow: hidden;
			width: 100%;
			height: 80rpx;
			@include clear();
			background-color: #1534ce;
			.item{
				width: 20%;
				float: left;
				height: 80rpx;
				background-color: #1534ce;
				position: relative;
				padding: 0;
				.label{
					height: 80rpx;
					line-height: 80rpx;
					position: relative;
					z-index: 10;
					box-sizing: border-box;
					text-align: center;
					width: 100%;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #ffffff;
					white-space: keep-all;
				}
				.shape{
					z-index: 1;
					width: 50rpx;
					height: 50rpx;
					position: absolute;
					bottom: 0;
					left: -50rpx;
					background: #000;
					display: none;
					background-color: #fff;
					overflow: hidden;
					.shape-body{
						width: 50rpx;
						height: 50rpx;
						background-color: #1534ce;
						border-bottom-right-radius: 40rpx;
					}
				}
				.shape-mirrow{
					z-index: 1;
					left: 0;
					display: none;
					.shape-body{
						border-bottom-right-radius: 0rpx;
						border-bottom-left-radius: 40rpx;
					}
				}
			}
			.item__active{
				border-top-left-radius: 40rpx;
				border-top-right-radius: 40rpx;
				background-color: #fff;
				.label{
					color: #46464a;
				}
				.shape{
					display: block;
				}
				.shape-mirrow{
					display: none;
				}
			}
			.item__active_next{
				border-bottom-right-radius: 50rpx;
				.shape{
					display: none;
				}
				.shape-mirrow{
					display: block;
				}
			}
			
		}
		.actions{
			width: 100%;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 30rpx 25rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 999;
			box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
			.custom-button{
				margin: 0;
			}
			.cancel{
				background-color: #afafaf!important;
				margin-right: 20rpx;
			}
			.btn-wrapper{
				@include clear;
				.custom-button{
					float: left;
				}
			}
			.checkbox{
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				color: #333;
				width: 200rpx;
				padding-top: calc((62rpx - 18px) / 2);
			}
			.custom-button{
				letter-spacing: 5rpx;
				width: 200rpx;
			}
		}
		.wrapper{
			width: 100%;
			overflow-y: auto;
			overflow-x: hidden;
			height: calc(100% - 202rpx);
		}
		.item{
			width: 100%;
			height: 60rpx;
			box-sizing: border-box;
			padding: 0 15px;
			@include clear();
			.check{
				width: 24rpx;
				height: 24rpx;
				border: solid 1rpx #000000;
				border-radius: 50%;
				float: left;
				margin-top: 16rpx;
				position: relative;
				.check-on{
					transition: 0.3s ease;
					opacity: 0;
					transform: scale(0.5);
					border-radius: 50%;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
					width: 18rpx;
					height: 18rpx;
					background-color: #000000;
				}
			}
			.name{
				float: left;
				font-size: 32rpx;
				font-weight: 300;
				height: 60rpx;
				font-stretch: normal;
				line-height: 60rpx;
				letter-spacing: 0rpx;
				color: #000000;
				margin-left: 20rpx;
			}
			.check__active{
				.check-on{
					opacity: 1;
					transform: scale(1);
				}
			}
		}
	}
</style>
